<template>
	<div>
		<div class="hot1" id="wraper" :class="{'top':wraper==true}">
			<div class="listtop">
				<span v-for='(key,index) in tags' @click='change(index,key.class_region_id)' :class="{'active':index==num}">{{key.name}}</span>
			</div>
			<div class="city">
				<span v-for='(item,index) in tags[num].items'  @click='city(index,item.tag_id)' :class="{'active':index==citynum}">{{item.name}}</span>
			</div>
		</div>
		<div class="zw" :style="{height:zw+'px'}" v-show="wraper"></div>
		<div class="content_list">
            <div class="child" v-for="(item,index) in products" :key="index" @click='go(item)'>
                <div class="img">
                    <img :src="item.thumb" alt="">
                </div>
                <div class="title">
                    {{item.product_name}}
                </div>
                <div class="desc">
                    <span>{{item.product_cat}}</span>{{item.sub_name}}
                </div>
            </div>
        </div>
	</div>
</template>
<script>
	export default{
		props:['tags'],
		data(){
			return{
				num:0,
				products:'',
				wraper: false,
     			zw: 0,
     			citynum: 0,
     			id:2
			}
		},
		mounted(){
			this.$http.get("../../../../static/mock/lines.json").then((res)=>{
				let data=res.data.data;
				this.products=data.products;
				// console.log(this.products)
			})
			window.addEventListener("scroll", this.handleScroll, true);
		},
		methods:{
			go(item){
				let thumb=item.thumb;
				let product_name=item.product_name;
				let sub_name=item.sub_name;
				let place_label=item.place_label;
				let price_label=item.price_label;
				this.$router.push({
					path:'/datails',
					query:{
						thumb,
						product_name,
						sub_name,
						place_label,
						price_label
					}
				})
			},
			getdata(url) {
		      this.axios.get(url).then(res => {
		        this.products = res.data.data.products;
		      })
		    },
			change(index,id){
				this.num=index;
				this.citynum=0;
				this.id=id,
				this.axios
		        .get("/api/api/lines?class_region_id=" + id + "&tag_id=0&page=1")
		        .then(res => {
		          this.products = res.data.data.products;
		          // console.log(this.products);
		        });
				this.zw = document.querySelector("#wraper").offsetHeight;
				document.documentElement.scrollTop=3399
			},
			city(index,id){
				this.citynum=index;
				this.axios
		        .get("/api/api/lines?class_region_id=" + this.id + "&tag_id="+id+"&page=1")
		        .then(res => {
		          // console.log(res)
		          this.products = res.data.data.products;
		          // console.log(this.products);
		        });
		      this.zw = document.querySelector("#wraper").offsetHeight;
		      document.documentElement.scrollTop=3399
			},
			handleScroll() {
		      var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		        // console.log(document.querySelector('#wraper').offsetHeight)
		      if (scrollTop >= 3400) {
		        this.wraper = true;
		        this.zw = document.querySelector("#wraper").offsetHeight;
		      } else {
		        this.wraper = false;
		        this.zw = 0;
		      }
		    },
		}
	}
</script>
<style lang='stylus' scoped>
.hot1{
	width: 100%;
	background: #fff;
}
	.top {
        position: fixed;
        top: 0;
        z-index 55
    }
	.listtop{
		display: flex;
		width: 100%;
		span{
			width: 25%;
			font-size: .45rem;
			text-align: center;
			padding:.4rem 0;
		}
		.active{
			border-bottom: 2px solid #fdc72e;
		}

	}
	.city {
            display: flex;
            flex-wrap: wrap;
            padding-top: 0.26666rem;
            span {
                width: 1.6rem;
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.3rem;
                text-align: center;
                margin: 0 0.2rem;
                background: #f7f7f7;
                color: #666;
                border-radius: 0.12rem;
                margin-bottom: 0.2666rem;
                box-sizing: border-box;
            }

            .active {
                background: #fdc72e;
                border: 1px solid #333;
            }
        }
	.content_list {
        position relative
        margin-bottom: 1.2rem
        .child {
            overflow: hidden;
            border-bottom: 10px solid rgb(245, 245, 245);

            .img {
                img {
                    width: 100%;
                    height: 4.8rem;
                }
            }

            .title {
                font-size: 0.4rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0.2rem 0.3333rem 0;
            }

            .desc {
                font-size: 0.3rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0.2rem 0.3333rem 0.3rem;
                color: #b4b4b4;

                span {
                    display: inline-block;
                    background: #f68b6e;
                    color: #fff;
                    padding: 0.1rem;
                    margin-right: 0.1rem;
                }
            }
        }
    }
	
</style>